<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo6</title>
</head>
<body>
  <!-- 对模式进行一种组件式的包装 -->
  <div id="root"></div>

  <script>
    var root = document.getElementById('root')

    // Component 提供继承
    class Component {
      // 更改状态
      setState(newState) {
        this.state = {
          ...this.state,
          ...newState
        }
      }
    }

    // Button 组件
    class Button extends Component {
      constructor() {
        super()
        this.state = {
          like: true
        }
      }
      render() {
        const state = this.state
        return `
          <button type="button" style="color: ${state.like ? "red" : "balck"}">
            ${state.like ? "已赞" : "喜欢"}
          </button>
        `
      }
    }


    // Title 组件
    class Title extends Component {
      constructor() {
        super()
        this.state = {
          text: "这是一个标题！"
        }
      }
      render() {
        return `<h1>${this.state.text}</h1>`
      }
    }


    // Wrap 容器组件
    class Wrap {
      constructor() {

      }
      render() {
        return`
          wrap
          ${new Title().render()}
          ${new Title().render()}
          ${new Title().render()}
          ${new Button().render()}
        `
      }
    }

    root.innerHTML = new Wrap().render()


    

  </script>

  
</body>
</html>